<template>
  <div>
    <van-nav-bar
      title="在奈雪发现美好"
      left-arrow
      @click-left="onClickLeft"
      fixed
    ></van-nav-bar>
    <van-image class="img" src="/images/store/1.png">
      <div class="gift">
        <input
          type="text"
          v-model="phone"
          class="input"
          placeholder="输入手机号"
        />
        <button
          class="btn"
          :disabled="!agree"
          :class="{ disabled: agree }"
          @click="showPopup"
        >
          领取奈雪现金券
        </button>
        <div class="choose">
          <input class="radio_type" type="checkbox" name="type" id="radio" />
          <label for="radio"></label>
          <span
            >我已阅读并同意<a href="#">《奈雪会员协议》</a>和<a href="#"
              >《隐私协议》</a
            ></span
          >
          <van-popup class="pop" v-model="show" closeable>
            <p>请输入正确手机号</p>
            <button @click="closePopup">我知道了</button>
          </van-popup>
        </div>
      </div>
    </van-image>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      agree: true,
      show: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("index");
    },
    showPopup() {
      if (/^1[3-9]\d{9}$/.test(this.phone)) {
        console.log("点击按钮领取奈雪劵..");
        return;
      } else {
        this.show = true;
      }
    },
    closePopup() {
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.img {
  margin-top: 46px;
  position: relative;
}
::v-deep .van-icon {
  color: black;
}
::v-deep .gift {
  width: 75vw;
  box-sizing: border-box;
  position: absolute;
  top: 108vw;
  left: 13vw;
}
.gift .input {
  width: 60vw;
  padding: 1vw;
  border-radius: 1vw;
  border: 1px solid #dbdbdb;
}
/* 设置input框placeholder的属性 */
.input::-webkit-input-placeholder {
  color: #c3c2c7;
  text-align: center;
}
/* Mozilla Firefox 19+ */
.input::-moz-placeholder {
  color: #c3c2c7;
  text-align: center;
}
/* Mozilla Firefox 4 to 18 */
.input:-moz-placeholder {
  color: #c3c2c7;
  text-align: center;
}
/* Internet Explorer 10-11 */
.input:-ms-input-placeholder {
  color: #c3c2c7;
  text-align: center;
}
.gift .btn {
  width: 63vw;
  margin: 4vw 0;
  padding: 2vw;
  border: none;
  border-radius: 1vw;
  color: #fff;
  background-color: #a6bb04;
}
.gift .btn:disabled {
  background-color: #d1d3d6;
}
.choose {
  font-size: 3vw;
  line-height: 16px;
}
.choose input {
  float: left;
}
.choose span {
  display: block;
  height: 17px;
  float: right;
}
.choose a {
  color: #aab84a;
}
.choose .pop {
  width: 60vw;
  height: 30vw;
  border-radius: 2vw;
  opacity: 0.9;
}
.choose .pop p {
  margin: 6vw;
}
.choose .pop button {
  width: 40vw;
  height: 8vw;
  border: none;
  color: #fff;
  background-color: #a6bb04;
  letter-spacing: 1px;
  border-radius: 1vw;
}
.choose .pop ::v-deep .van-icon {
  color: #a8a8aa;
}
/* 单选换颜色 */
.radio_type {
  appearance: none;
  position: relative;
}
.radio_type:before {
  content: "";
  width: 3vw;
  height: 3vw;
  border: 1px solid #aab84a;
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
}
.radio_type:checked:before {
  content: "";
  width: 3vw;
  height: 3vw;
  border: 1px solid #aab84a;
  background: #aab84a;
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
}
.radio_type:checked:after {
  content: "";
  width: 2vw;
  height: 1vw;
  border: 1px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 2px;
  vertical-align: middle;
  transform: rotate(-45deg);
}
</style>
